import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createAddAction} from '../../redux/action/List'
 
class Header extends Component {
    handleAdd = (event) => {
        if(event.keyCode !== 13) return
        this.props.add({id:nanoid(),name:event.target.value,done:false})
        event.target.value = ''
    }
    render() {
        return (
            <div className="todo-header">
                <input type="text" placeholder="请输入你的任务名称，按回车键确认" 
                onKeyUp={this.handleAdd}/>
            </div>
        )
    }
}

export default connect(
    state => ({list:state}),
    {
        add: createAddAction
    }
)(Header)